package com.example.newproject_overseas.Screen


import android.graphics.BitmapFactory
import android.net.Uri
import android.provider.MediaStore
import android.util.Log
import android.widget.ImageView
import androidx.activity.compose.rememberLauncherForActivityResult
import androidx.activity.result.contract.ActivityResultContracts
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.lazy.grid.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.Button
import androidx.compose.material.ButtonDefaults
import androidx.compose.material.Divider
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material.ModalBottomSheetValue
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.material.TextField
import androidx.compose.material.rememberModalBottomSheetState
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateListOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.draw.scale
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.focus.FocusRequester
import androidx.compose.ui.focus.focusRequester
import androidx.compose.ui.focus.onFocusChanged
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ImageBitmap
import androidx.compose.ui.graphics.asImageBitmap
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.text.input.TextFieldValue
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation.NavHostController
import androidx.navigation.compose.rememberNavController
import coil.compose.rememberImagePainter
import com.example.newproject_overseas.R
import com.example.newproject_overseas.components.BottomSheetContent
import com.example.newproject_overseas.components.TopApp
import kotlinx.coroutines.launch
import androidx.compose.foundation.layout.Box as Box

@OptIn(ExperimentalMaterial3Api::class, ExperimentalMaterialApi::class)
@Composable
fun HelpAndFeedback(navController: NavHostController) {
    var isBottomSheetOpen by remember { mutableStateOf(false) }
    val state = rememberModalBottomSheetState(
        initialValue = ModalBottomSheetValue.Hidden,
        skipHalfExpanded = isBottomSheetOpen
    )
    val scope = rememberCoroutineScope()
    var selectedData by remember { mutableStateOf("") }
    //textFiled
    var textState by remember { mutableStateOf("") } //textare变量
    val focusRequester = remember { FocusRequester() }

    //数组图片
    val selectedImageUris = remember { mutableStateListOf<Uri>() }
    val galleryLauncher = rememberLauncherForActivityResult(
        contract = ActivityResultContracts.GetMultipleContents(),
        onResult = { selectedUris ->
//            selectedImageUris.clear()
            selectedImageUris.addAll(selectedUris)
        }
    )



    Column(modifier = Modifier
        .fillMaxSize()
        .background(color = Color(0XFFEFF0F3))) {
        //导航1
        TopApp(title = "Help and feedback", navController = navController)
        //第一块
        Surface(shape = RoundedCornerShape(5.dp), modifier = Modifier

            .fillMaxWidth(1f)
            .padding(start = 7.5.dp, end = 7.5.dp, top = 7.5.dp, bottom = 15.dp)){
            Column(modifier = Modifier
                .fillMaxWidth(1f)
                .shadow(7.5.dp, shape = RoundedCornerShape(7.5.dp), clip = true)
                .background(Color.White)) {

                Row(modifier = Modifier.padding(start = 10.dp, bottom = 10.dp),
                    verticalAlignment = Alignment.CenterVertically) {
                    VerticalLines()
                    Image(painter =  painterResource(id = R.drawable.start), contentDescription = "星星",
                        modifier = Modifier
                            .padding(top = 11.dp)
                            .width(24.dp)
                            .height(24.dp))
                    Text(text = "Question type", modifier = Modifier, fontSize = 15.sp)
                }

                Row(
                    modifier = Modifier
                        .padding(start = 10.dp, end = 10.dp, bottom = 15.5.dp)
                ) {
                    Surface(shape = RoundedCornerShape(5.dp)) {
                        Row(
                            modifier = Modifier
                                .background(Color(0xFFF1F1F1))
                                .fillMaxWidth()
                                .wrapContentHeight()
                                .padding(start = 25.dp),
                            verticalAlignment = Alignment.CenterVertically
                        ) {

                            Box(modifier = Modifier.weight(6f)) {
                                Text(
                                    text = if (selectedData.isNullOrEmpty()) "Please Choose" else selectedData,
                                    fontSize = 20.sp,
                                    fontWeight = FontWeight.Bold
                                )
                            }
                            Spacer(modifier = Modifier.weight(1f))
                            Row(modifier = Modifier) {
                                Button(
                                    onClick = { scope.launch { state.show() } },
                                    modifier = Modifier
                                        .padding(top = 8.5.dp, bottom = 8.5.dp, end = 5.dp),
                                    colors = ButtonDefaults.buttonColors(Color(0xFFFFCC00)),
                                    shape = RoundedCornerShape(4.5.dp)
                                ) {
                                    Text(
                                        text = "UPI",
                                        color = Color(0xFFFFFFFF),
                                        fontSize = 20.sp,
                                        fontWeight = FontWeight.Bold
                                    )
                                }
                            }

                        }
                    }
                }

                Divider(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(top = 10.dp, bottom = 21.dp, start = 10.dp, end = 10.dp)
                )
                
                Text(modifier = Modifier.padding(start = 8.dp, end = 8.dp, bottom = 14.dp),text = "Please submit a screenshot of the repayment with a 12-digit Ref.no",color = Color(0xFF272727), fontSize = 12.5.sp)
            }
        }
        //第二块
        Surface(shape = RoundedCornerShape(5.dp), modifier = Modifier
            .fillMaxWidth(1f)
            .padding(start = 7.5.dp, end = 7.5.dp)){
            Column(modifier = Modifier
                .fillMaxWidth(1f)
                .background(Color.White)) {
                Row(
                    modifier = Modifier.padding(start = 10.dp, bottom = 10.dp),
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    VerticalLines()
                    Image(
                        painter = painterResource(id = R.drawable.start),
                        contentDescription = "星星",
                        modifier = Modifier
                            .padding(top = 11.dp)
                            .width(24.dp)
                            .height(24.dp)
                    )
                    Text(text = "Guestions and suggestions", modifier = Modifier, fontSize = 15.sp)
                }


                //输入框
                Box(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(16.dp)
                        .height(110.dp)
                ) {
                    BasicTextField(modifier = Modifier
                        .fillMaxWidth()
                        .background(Color(0xFFF1F1F1))
                        .height(110.dp)
                        .padding(10.dp)
                        .focusRequester(focusRequester)
                        .onFocusChanged { focusState ->
                            if (focusState.isFocused) {
                                focusRequester.requestFocus()
                            }
                        },
                        value = textState, onValueChange = { textState = it },
                        keyboardOptions = KeyboardOptions.Default.copy(
                            imeAction = ImeAction.Done,
                            keyboardType = KeyboardType.Text
                        ),
                        textStyle = TextStyle(
                            fontSize = 16.sp,
                            color = Color.Black
                        ),
                        singleLine = false
                    )
                    if (textState.isEmpty()) {
                        Text(
                            text = "Please enter your questions and suggestions, we will continue to optimize the experience",
                            style = TextStyle(fontSize = 16.sp, color = Color.Gray),
                            modifier = Modifier
                                .padding(start = 10.dp, top = 10.dp)
                        )
                    }

                }
            }

        }

        //第三块
        Surface(shape = RoundedCornerShape(5.dp), modifier = Modifier
            .fillMaxWidth(1f)
            .padding(start = 7.5.dp, end = 7.5.dp, top = 15.dp)){


            Column(modifier = Modifier
                .fillMaxWidth(1f)
                .background(Color.White)) {
                Row(
                    modifier = Modifier.padding(start = 10.dp, bottom = 10.dp),
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    VerticalLines()
                    Text(text = "upload problem pictures, onlyJPG and PNG are supported", modifier = Modifier.padding(start = 10.dp, top = 13.dp), fontSize = 15.sp, color = Color(0xFF999999))
                }
                LazyVerticalGrid(
                    columns = GridCells.Fixed(4),
                ) {
                    items(selectedImageUris) { uri ->
                        Image(
                            painter = rememberImagePainter(uri),
                            contentDescription = "Selected Image",
                            modifier = Modifier.fillMaxWidth()
                        )


                    }
                }

                //图片上传按钮
                Box(modifier = Modifier.padding(top = 25.dp, bottom = 32.dp, start = 10.dp)){
                    if (selectedImageUris.size < 8) {
                        Button(
                            onClick = {
                                galleryLauncher.launch("image/*")
                            },
                            modifier = Modifier
                                .width(50.dp)
                                .height(50.dp)
                                .background(Color(0xFFF1F1F1), shape = RoundedCornerShape(4.5.dp)),
                            colors = ButtonDefaults.buttonColors(Color(0xFFF1F1F1)),
                            shape = RoundedCornerShape(4.5.dp)
                        ) {
                            Image(
                                painter = painterResource(id = R.drawable.add),
                                contentDescription = "添加",
                                modifier = Modifier
                                    .width(26.dp)
                                    .height(26.dp)
                            )
                        }
                    }

                }


            }
        }

        //底部按钮
        Box(modifier = Modifier
            .fillMaxSize() ){
            //底部按钮
            Button(onClick = { /*TODO*/ }, modifier = Modifier
                .fillMaxWidth(1f)
                .height(44.dp)
                .align(Alignment.BottomCenter),
                colors = ButtonDefaults.buttonColors(Color(0xFFFFCC00)),
                shape = RoundedCornerShape(4.5.dp)) {
                Text(
                    modifier = Modifier,
                    text = "Submit",
                    color = Color(0xFFFFFFFF),
                    fontSize = 20.sp
                )
            }
        }
    }

    //底部弹出层
    BottomSheetContent(
        state = state,
        dataList = listOf("Not updated after repayment", "Application passed but not credited"),
        onSelectData = { data -> selectedData = data },
        onCloseSheet = {  scope.launch { state.hide() } }
    )
}

@Preview
@Composable
fun HelpAndFeedbackPreview() {
    val navController = rememberNavController()
    HelpAndFeedback(navController)
}

